<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition template="./templates/templateLogeo.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets">
  
    <ui:define name="libreria">
        <h:outputStylesheet library="css" name="styleRegistroSistema.css" />
    </ui:define>
    
    <ui:define name="windowTitle">SAMUPG::Registro Usuario</ui:define>

    <ui:define name="content">  
        <p:growl showDetail="false" showSummary="true" sticky="true" id="growl"/>
        <h:form style="margin-left:20px;" prependId="false">
            <h:panelGrid style="font-size:16px; margin-bottom:8px; margin-top:5px;">
                <h:outputText value="Crear cuenta de usuario"/>
            </h:panelGrid>

            <h:panelGrid columns="2" columnClasses="oddColumnRegistro,evenColumnRegistro" rowClasses="rowRegistro">
                <h:outputText value="Nick"/>
                <p:inputText value="#{usuarioController.nickUsuario}"
                             required="true"  id="txtNick"
                             style="width: 280px; background: white; color: black;"
                             requiredMessage="Ingrese un Nick (nombre de usuario)"/>

                <h:outputText value="Password"/>
                <p:password value="#{usuarioController.passUsuario}"
                            required="true"  id="txtPass"
                            style="width: 280px; background: white; color: black;"
                            requiredMessage="Ingrese Password"/>

                <h:outputText value="DNI"/>
                <p:inputText value="#{usuarioController.dniUsuario}"
                             required="true"  id="txtDni"
                             style="width: 280px; background: white; color: black;"
                             requiredMessage="Ingrese Categoría."/>
                <h:outputText value="Nombres"/>
                <p:inputText value="#{usuarioController.nombreUsuario}"
                             required="true"  id="txtNombre"
                             style="width: 280px; background: white; color: black;"
                             requiredMessage="Ingrese Nombre(s)"/>
                <h:outputText value="Apellido Paterno"/>
                <p:inputText value="#{usuarioController.apepatUsuario}"
                             required="true"  id="txtApePat"
                             style="width: 280px; background: white; color: black;"
                             requiredMessage="Ingrese Apellido Paterno"/>
                <h:outputText value="Apellido Materno"/>
                <p:inputText value="#{usuarioController.apematUsuario}"
                             required="true"  id="txtApeMat"
                             style="width: 280px; background: white; color: black;"
                             requiredMessage="Ingrese Apellido Materno"/>

                <h:outputText value="Teléfono"/>
                <p:inputText value="#{usuarioController.telUsuario}"
                             required="true"  id="txtTelefono"
                             style="width: 280px; background: white; color: black;"
                             requiredMessage="Ingrese Teléfono"/>

                <h:outputText value="Correo(s)"/>
                <p:inputText value="#{usuarioController.correosIngresados}"
                             disabled="true"
                             style="width: 280px; background: white; color: black;"
                             />

                <h:outputText value=""/>

                <h:form>
                    <h:panelGrid columns="2" style="margin: auto;">
                        <p:inputText value="#{usuarioController.correoDireccion}" id="txtCorreo" required="false" 
                                     style="width: 231px; background: white; color: black;" />
                        <p:commandButton actionListener="#{usuarioController.addCorreo}"  id="iconOnly"  
                                         icon="ui-icon-circle-plus" title="Icon Only" style="height: 33px"/>
                    </h:panelGrid>                            
                </h:form>

                <h:panelGroup />
                <p:commandButton value="Grabar" ajax="false" type="submit"
                                 action="#{usuarioController.saveActionAlumno}" 
                                 image="ui-icon ui-icon-disk" 
                                 style="margin-right: 20px"/>
            </h:panelGrid>

            <h:link value="Volver a la página de inicio" outcome="login.jsf" style="margin-top:10px; display:inline-block;"/>
        </h:form>
    </ui:define>
</ui:composition>

